<template>
	<view>
		<view class="box">
			<view style="font-size: 30rpx; color: #333333; margin-bottom: 30rpx;">提现金额</view>
			<view style="margin: 20rpx 0 ">
				<u-form border-bottom class="form">
					<u-form-item label="￥" style="font-size: 48rpx;">
						<u-input v-model="money" placeholder="请输入金额" />
					</u-form-item>
				</u-form>
			</view>
			<view style="float: left; font-size: 30rpx; color: #333333;">可提余额￥{{countMoney}}</view>
			<view @click="allIn" style="float: right; color: #2979ff;">全部提出</view>
		</view>
		<view v-if="bankCardList.length==0" class="box1">
			<u-cell-group>
				<u-radio-group v-model="payType" @change="radioGroupChange">
					<u-cell-item v-if="isWinxin" :arrow="false" class="group">
						<view slot="title">微信零钱</view>
						<u-icon slot="icon" name="weixin-fill" size="40" style="color: #18BC37; margin-right: 8rpx;">
						</u-icon>
						<u-radio @change="radioChange('wechat')" class="item1" name="weixin"></u-radio>
					</u-cell-item>
				</u-radio-group>
				<u-cell-item title="添加银行卡" style="color: #2979ff" @click="addCard" >
					<u-icon slot="icon" name="plus-circle-fill" size="40" style="color: #2979ff; margin-right: 8rpx;">
					</u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view v-else class="box1">
			<u-cell-group>
				<u-radio-group v-model="payType" @change="radioGroupChange">
					<u-cell-item v-if="isWinxin" :arrow="false" class="group">
						<view slot="title">微信零钱</view>
						<u-icon slot="icon" name="weixin-fill" size="40" style="color: #18BC37; margin-right: 8rpx;">
						</u-icon>
						<u-radio @change="radioChange('wechat')" class="item" name="weixin"></u-radio>
					</u-cell-item>
					<u-cell-item v-for="(item,index) in bankCardList" :key="item.id"
						:label="item.bank_number" :arrow="false" class="group">
						<view style="width: 400rpx; overflow: hidden;" slot="title">{{item.bank_name}}</view>
						<u-icon slot="icon" name="yinxingqia" custom-prefix="custom-icon" style="margin-right: 10rpx;"
							size="32" color="#ff9930"></u-icon>
						</u-icon>
						<u-radio @change="radioChange(item)" :name="item.id" class="item"></u-radio>
					</u-cell-item>
				</u-radio-group>
				<u-cell-item title="添加银行卡" style="color: #2979ff" @click="addCard" >
					<u-icon slot="icon" name="plus-circle-fill" size="40" style="color: #2979ff; margin-right: 8rpx;">
					</u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-button type="primary" style="width: 90%;margin-top: 40rpx;" @click="applyMoney">立即提现</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: "",
				countMoney: 0,
				payType: "weixin",
				isWinxin: true,
				bankCardList: [],
				quaryList: {
					type: "wechat",
					money: "",
					bank_name: "",
					bank_deposit_name: "",
					bank_number: ""
				}
			}
		},
		onLoad(options) {
			// this.countMoney = options.money
			this.getBankCardList()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 得到个人信息=>余额
			getUserInfo() {
				this.$u.api.getUserInfo().then(res => {
					this.countMoney = res.data.money
				})
			},
			// 获取银行卡列表
			getBankCardList() {
				this.$u.api.getBankCardList().then(res => {
					if (res.code == 1) {
						this.bankCardList = res.data
					}
				})
			},
			// 判断是否为微信浏览器
			weixinBrowser() {
				let ua = navigator.userAgent.toLowerCase();
				this.isWinxin = ua.indexOf('micromessenger') != -1;
			},
			allIn() {
				this.money = this.countMoney
			},
			addCard() {
				this.$u.route('/pages/center/addCard/addCard')
			},
			radioGroupChange(e) {
			},
			radioChange(value) {
				if (value != "wechat") {
					this.quaryList.bank_deposit_name = value.bank_deposit_name
					this.quaryList.bank_name = value.bank_name
					this.quaryList.bank_number = value.bank_number
				}
			},

			applyMoney() {
				if (this.money < 1) {
					this.$u.toast('提现金额不能小于1元')
					this.money = ""
					return
				}
				this.quaryList.money = this.money
				this.$u.api.addInfo(this.quaryList).then(res => {
					if (res.code == 1) {
						this.$u.route("/pages/center/success/success")
					} else {
						this.$u.toast(res.msg)
					}
				})

			}

		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 20rpx 30rpx;
		margin: 80rpx auto;
		width: 90%;
		height: 280rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;

	}

	.box1 {
		padding: 20rpx 30rpx;
		margin: 0 auto;
		width: 90%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
	}
	.group{
		position: relative;
	}
	.item {
		position: absolute;
		right: 0rpx;
		top:40rpx
	}
	.item1{
		position: absolute;
		left: 555rpx;
		top:30rpx
	}
</style>
